<template>
  <div class="container">
    <div class="nav">
      <div class="time">{{ localTime }}</div>
      <div class="city">切换城市</div>
    </div>
    <div class="city-info">
      <p class="city">{{ mapData.city }}</p>
      <p class="weather">{{ mapData.weather }}</p>
      <h2 class="temp">
        <em>{{ mapData.temperature }}</em
        >℃
      </h2>
      <div class="detail">
        <span>风向：{{ mapData.windDirection }}</span>
        <span>风力：{{ mapData.windPower }}级</span>
        <span>空气湿度：{{ mapData.humidity }}%</span>
      </div>
    </div>

    <div class="future" v-if="futureMapData.length > 0">
      <div class="group">
        明天：
        <span class="tm">白天：{{ futureMapData[1].dayTemp }}℃</span>
        <span class="tm">夜间：{{ futureMapData[1].nightTemp }}℃</span>
      </div>
      <div class="group">
        后天：
        <span class="tm">白天：{{ futureMapData[2].dayTemp }}℃</span>
        <span class="tm">夜间：{{ futureMapData[2].nightTemp }}℃</span>
      </div>
    </div>

    <div class="map-container" ref="mapContainer"></div>

    <div class="echart-container" ref="echartContainer"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      localTime: "",
      mapData: {},
      futureMapData: [],
      seriesData: [],
    };
  },
  created() {
    setInterval(() => {
      this.localTime = new Date().toLocaleTimeString();
    }, 1000);
    this.$nextTick(() => {
      this._initMap();
    });
  },
  methods: {
    _initMap: function () {
      // 获取当前城市
      let _this = this;

      AMap.plugin("AMap.CitySearch", function () {
        var citySearch = new AMap.CitySearch();
        citySearch.getLocalCity(function (status, result) {
          if (status === "complete" && result.info === "OK") {
            // 查询成功，result即为当前所在城市信息
            console.log(result);

            _this.getCurCityData(result.city);
          }
        });
      });
    },
    getCurCityData(city) {
      let _this = this;
      //加载天气查询插件
      AMap.plugin("AMap.Weather", function () {
        //创建天气查询实例
        var weather = new AMap.Weather();

        //执行实时天气信息查询
        weather.getLive(city, function (err, data) {
          console.log(data);
          _this.mapData = data;
        });
        weather.getForecast(city, function (err, data) {
          console.log(data);
          _this.futureMapData = data.forecasts;

          data.forecasts.forEach((x) => {
            _this.seriesData.push(x.dayTemp);
          });

          _this.initEchart(_this.$refs.echartContainer, _this.seriesData);
        });
      });
    },

    initEchart(el, data) {
      var myChart = echarts.init(el);
      var option;
      option = {
        xAxis: {
          type: "category",
          data: ["今天", "明天", "后天"],
        },
        yAxis: {
          type: "value",
        },
        tooltip: {
          trigger: "axis",
          formatter: "{b} {c} °C",
        },
        series: [
          {
            data: data,
            type: "line",
          },
        ],
      };

      option && myChart.setOption(option);
    },
  },
};
</script>

<style lang='less'>
.container {
  min-height: 100vh;
  background-color: #000;
  opacity: 0.7;
  color: #fff;
  .nav {
    display: flex;
    justify-content: space-between;
    padding: 10px;
  }
  .city-info {
    text-align: center;
    .temp {
      font-size: 26px;
      em {
        font-size: 34px;
        font-style: normal;
      }
    }
  }
  .future {
    margin-top: 30px;
    padding: 0 10px;
    .group {
      height: 44px;
      line-height: 44px;
      border-radius: 4px;
      background-color: rgba(255, 255, 255, 0.3);
      color: rgba(16, 16, 16, 1);
      font-size: 16px;
      margin-bottom: 10px;
      padding: 0 10px;
      .tm {
        color: #fff;
      }
    }
  }
  .echart-container {
    width: 100%;
    height: 50vh;
  }
}
</style>